<template>
    <div class="goods-item" @click="openDetails">
        <div class="poster">
            <img :src="goodsData.imgUrl1 ||
                goodsData.imgUrl2 ||
                goodsData.imgUrl3 ||
                goodsData.imgUrl4 || $defaultGoodsImage
                " alt="" />
        </div>
      <div class="price_star">
        <div class="price">
          ${{ priceFormat(goodsData.sellingPrice) }}
          <!-- <p v-if="Number(goodsData.discountPrice)" class="old"><span>{{ $t('原价') }}</span> {{ goodsData.discountPrice }}</p> -->
        </div>
        <div class="sold" @click.stop="addKeepGoods(goodsData)">
          <i class="el-icon-star-on"></i>
        </div>
      </div>
        <div class="info">
            <div class="name">{{goodsData.name}}</div>

<!--            <p>-->
<!--                <span>{{ $t("已售") }}</span> {{ goodsData.soldNum }}-->
<!--            </p>-->
        </div>
        <div class="jiag"><i class="el-icon-shopping-cart-full"></i>{{$t("立即购买") }}</div>
    </div>
</template>

<script>
import { priceFormat } from "@/utils/utis";
import {keepGoodsDel} from "@/API/commodity";
import {Toast} from "vant";
export default {
    name: "GoodsItemTwo",
    props: {
        goodsData: {
            type: Object,
            required: true,
            default: function () {
                return {};
            },
        },
    },
    methods: {
      addKeepGoods(item){
        let dataJson = {
          sellerGoodsId: item.id,
        };
        keepGoodsDel(dataJson).then(() => {
          Toast(this.$t("取消成功"));
          this.$emit('onLoad');
          // this.init();
        });
      },
        priceFormat(num) {
            return priceFormat(num);
        },
        openDetails() {
            this.$router.push({
                path: "/CommodityDetails",
                query: {
                    sellerGoodsId: this.goodsData.id,
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.goods-item {
    * {
        box-sizing: border-box;
    }

    display: flex;
  flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid #eee;
    margin-top: 20px;
    border-radius: 8px;
    .poster {
        width: 160px;
        height: 160px;
        overflow: hidden;
      cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 100%;
            height: auto;
        }
    }
  .price_star{
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .price{
      font-size: 16px;
      color: var(--main-color);
    }
    .sold{
      ::v-deep .el-icon-star-on{
        font-size: 20px;
        color: var(--main-color);
      }
    }
  }
  .info{
    margin-top: 10px;
    .name{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 18px;
    }
  }
  .jiag{
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    .el-icon-shopping-cart-full{
      font-size: 14px;
    }
  }


}
</style>
